<template>
  <div class="avue-top" >
    <div class="top-bar__left">
      <div class="avue-breadcrumb">
        <i class="icon-navicon avue-breadcrumb_collapse"
           :class="[{ 'avue-breadcrumb_collapse--right': isCollapse }]"
           @click="setCollapse" style="line-height:60px"></i>
      </div>
    </div>
    <h1 class="top-bar__title">
      <div class="top-bar__item top-bar__item--show"
           v-if="showMenu">
        <!-- <top-menu></top-menu> -->
      </div>
      <!-- <span class="top-bar__item"
            v-if="showSearch">
        <top-search></top-search>
      </span> -->
    </h1>
    <div class="top-bar__right" v-show="rightHidd">
      <!--<el-tooltip v-if="showColor"
                  effect="dark"
                  content="主题色"
                  placement="bottom">
        <div class="top-bar__item">
          <top-color></top-color>
        </div>
      </el-tooltip>-->
      <!-- <el-tooltip v-if="showDebug"
                  effect="dark"
                  :content="logsFlag?'没有错误日志':`${logsLen}条错误日志`"
                  placement="bottom">
        <div class="top-bar__item">
          <top-logs></top-logs>
        </div>
      </el-tooltip> -->
      <!-- <el-tooltip v-if="showLock"
                  effect="dark"
                  content="锁屏"
                  placement="bottom">
        <div class="top-bar__item">
          <top-lock></top-lock>
        </div>
      </el-tooltip> -->
      <el-tooltip v-if="showTheme"
                  effect="dark"
                  content="特色主题"
                  placement="bottom">
        <div class="top-bar__item top-bar__item--show">
          <top-theme></top-theme>
        </div>
      </el-tooltip>
     <!-- <div class="top-bar__item">
        <top-msg></top-msg>
      </div>-->

      <!-- <el-tooltip v-if="showFullScren"
                  effect="dark"
                  :content="isFullScren?'退出全屏':'全屏'"
                  placement="bottom">
        <div class="top-bar__item">
          <i :class="isFullScren?'icon-tuichuquanping':'icon-quanping'"
             @click="handleScreen"></i>
        </div>
      </el-tooltip> -->
      <!-- <el-tooltip effect="dark"
                  content="用户头像"
                  placement="bottom">
        <img class="top-bar__img"
             :src="website.axiosUrl + userInfoX.headUrl">
      </el-tooltip> -->
      <el-dropdown>
        <span class="el-dropdown-link">
          {{userInfoX.name}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
         <!-- <el-dropdown-item>
            <router-link to="/">首页</router-link>
          </el-dropdown-item>
          <el-dropdown-item>
            <router-link to="/info/index">个人信息</router-link>
          </el-dropdown-item>
          <el-dropdown-item @click.native="logout"
                            divided>退出</el-dropdown-item>-->
          <el-dropdown-item @click.native="logout"
                            divided>退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <top-setting></top-setting>
    </div>

 <!--   <div class="top-bar__right pwcon" style="right: 200px;">
      <el-autocomplete
        v-model="state"
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        :trigger-on-focus="true"
        :fetch-suggestions="querySearchAsync"
        @select="handleSelect"
      ></el-autocomplete>
    </div> -->

  </div>
</template>
<script>
import { mapGetters, mapState, mapMutations } from "vuex";
import { fullscreenToggel, listenfullscreen } from "@/util/util";
import topLock from "./top-lock";
import topMenu from "./top-menu";
import topSearch from './top-search';
import topBreadcrumb from "./top-breadcrumb";
import topColor from "./top-color";
import topTheme from "./top-theme";
import topLogs from "./top-logs";
import topSetting from "./top-setting";
import topMsg from "./top-msg";
import website from "@/const/website";
import { setStore, getStore } from '@/util/store';
import { getMenuOfParentId } from "@/api/public/menu";
import { RestructureMenu } from '@/util/util';
export default {
  components: { topLock, topMenu, topSearch, topBreadcrumb, topColor, topTheme, topLogs, topSetting, topMsg },
  name: "top",
  data () {
    return {
        rightHidd:true,
        website:website,
        userInfoX: getStore({ name: "userInfoData" }),

        restaurants: [],// 下拉列表
        seachPath: "", // 搜索path
        state: '',
        timeout:  null
    };
  },
  filters: {},
  created () {
      this.rightHidd = document.documentElement.offsetWidth > 500;
  },
  mounted () {
    listenfullscreen(this.setScreen);
    this.restaurants = this.loadAll();// 搜索
  },
  computed: {
    ...mapState({
      showDebug: state => state.common.showDebug,
      showColor: state => state.common.showColor,
      showTheme: state => state.common.showTheme,
      showLock: state => state.common.showLock,
      showFullScren: state => state.common.showFullScren,
      showCollapse: state => state.common.showCollapse,
      showSearch: state => state.common.showSearch,
      showMenu: state => state.common.showMenu,
    }),
    ...mapGetters([
      "userInfo",
      "isFullScren",
      "tagWel",
      "tagList",
      "isCollapse",
      "tag",
      "logsLen",
      "logsFlag"
    ]),
  },
  methods: {
    ...mapMutations(['SET_MENU']),
    handleScreen () {
      fullscreenToggel();
    },
    setCollapse () {
      this.$store.commit("SET_COLLAPSE");
    },
    setScreen () {
      this.$store.commit("SET_FULLSCREN");
    },
    logout () {
      this.$confirm("是否退出系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // this.$store.dispatch("LogOut").then(() => {
        //   this.$router.push({ path: "/login" });
        // });
        this.$store.dispatch("FedLogOut").then(() => {
          this.$router.push({ path: "/login" });
        });

      });
    },
    // 搜索框
    loadAll() {
      // setTimeout(() => {
      //   let arrList = JSON.parse(sessionStorage.getItem("menuAll"));
      //   arrList = arrList.content;
      //   let list = [];
      //   arrList.forEach((item, i) => {
      //     if (item.children && item.children.length > 0) {
      //       list.push(item)
      //     }
      //   })
        
      //   if (list && list.length > 0) {
      //     list.forEach((item, i) => {
      //       if (item.path) {
      //         let obj = {
      //           value: item.name,
      //           path: item.path
      //         }
      //         this.restaurants.push(obj)
      //         if (item.children && item.children.length > 0) {
      //           item.children.forEach((ite, j) => {
      //             if (item.name != ite.name) {
      //               let obj = {
      //                 value: ite.name,
      //                 path: item.path + ite.path
      //               }
      //               this.restaurants.push(obj)
      //             }
      //           })
      //         }
      //       }
      //     })
      //   }
      //   console.log(this.restaurants)
      // }, 1000)
      return [
        { value: '预约日历', path: '/appointment/calendar', parentId: 359 },
        { value: '预约申请', path: '/appointment/apply', parentId: 359 },
        { value: '借用申请', path: '/appointment/lend', parentId: 359 },
        { value: '借出出归库', path: '/appointment/lendreturn', parentId: 359 },
        { value: '设备仪表盘', path: '/aintenance/dashboard', parentId: 359 },
        { value: '维保日历', path: '/aintenance/calendar', parentId: 359 },
        { value: '故障报停', path: '/aintenance/failureReporting', parentId: 359 },
        { value: '维保申请', path: '/aintenance/maintenanceApplication', parentId: 359 },
        { value: '维保执行', path: '/aintenance/maintenanceExecution', parentId: 359 },
        { value: '报废申请', path: '/aintenance/scrapApplication', parentId: 359 },
        { value: '报废执行', path: '/aintenance/scrapExecution', parentId: 359 },
        { value: '设备管理', path: '/device/management', parentId: 359 },
        { value: '培训管理', path: '/train/management', parentId: 359 },

        { value: '样品管理', path: '/sampleManage/management', parentId: 380 },
        { value: '设备转入数据', path: '/sampleData/equipment', parentId: 380 },
        { value: '人工录入数据', path: '/sampleData/artificial', parentId: 380 },
        { value: '检测项目数据', path: '/sampleData/project', parentId: 380 },

        { value: '项目列表', path: '/projectManage/progectList', parentId: 387 },
        { value: '外聘人员', path: '/projectManage/outsideStaff', parentId: 387 },

        { value: '耗材-领用申请', path: '/consumablesReceive/apply', parentId: 391 },
        { value: '耗材-领用出库', path: '/consumablesReceive/outStock', parentId: 391 },
        { value: '耗材-采购管理', path: '/consumablesMining/purchase', parentId: 391 },
        { value: '耗材-入库管理', path: '/consumablesMining/warehousing', parentId: 391 },
        { value: '耗材-退货管理', path: '/consumablesMining/returnGoods', parentId: 391 },
        { value: '耗材-报损报废', path: '/consumablesMining/scrap', parentId: 391 },
        { value: '耗材-实时库存', path: '/consumablesWarehousing/realTime', parentId: 391 },
        { value: '耗材-盘点管理', path: '/consumablesWarehousing/inventory', parentId: 391 },
        { value: '耗材-耗材分类', path: '/consumablesWarehousing/consumables', parentId: 391 },

        { value: '危险品-领用申请', path: '/dangerousReceive/apply', parentId: 404 },
        { value: '危险品-领用出库', path: '/dangerousReceive/outStock', parentId: 404 },
        { value: '危险品-采购管理', path: '/dangerousMining/purchase', parentId: 404 },
        { value: '危险品-入库管理', path: '/dangerousMining/warehousing', parentId: 404 },
        { value: '危险品-退货管理', path: '/dangerousMining/returnGoods', parentId: 404 },
        { value: '危险品-报损报废', path: '/dangerousMining/scrap', parentId: 404 },
        { value: '危险品-实时库存', path: '/dangerousWarehousing/realTime', parentId: 404 },
        { value: '危险品-盘点管理', path: '/dangerousWarehousing/inventory', parentId: 404 },
        { value: '危险品分类', path: '/dangerousWarehousing/consumables', parentId: 404 },

        { value: '物联平台', path: '/sysManage/objectAssociation', parentId: 417 },
        { value: '系统管理', path: '/sysManage/sysManage', parentId: 417 },

        { value: '用户管理', path: '/sysSetup/userManage', parentId: 421 },
        { value: '实验室管理', path: '/sysSetup/laboratoryManage', parentId: 421 },
        { value: '仓库管理', path: '/sysSetup/warehouseManage', parentId: 421 },
        { value: '供应商管理', path: '/sysSetup/supplierManage', parentId: 421 },
        { value: '审批流程管理', path: '/sysSetup/approvalManage', parentId: 421 },
      ]
    },
    // 搜索框 change事件
    querySearchAsync(queryString, cb) {
      console.log("change事件")
      var restaurants = this.restaurants;
      var results = queryString ? this.createStateFilter(queryString,restaurants) : restaurants;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter(queryString,restaurants) {
      var len = this.restaurants.length;
      var arr = [];
      for(let i=0;i<len;i++){
        //如果字符串中不包含目标字符会返回-1
        if(restaurants[i].value.indexOf(queryString) >= 0){
          //console.log(restaurants[i].value);//{name: "蓝天", id: 2}//{name: "李天一", id: 3}
          arr.push(restaurants[i]);
        }
      }
      return arr;
    },
    // 搜索列表 选中事件
    handleSelect(item) {
      setStore({ name: 'parentId', content: item.parentId , type: 'session' })
      getMenuOfParentId({ parentId: item.parentId }).then(res =>{
        if(res.data.code==200){
            let menuData = RestructureMenu(res.data.data[0].children);
            this.$router.$avueRouter.formatRoutes(menuData, true);
            this.SET_MENU(menuData)
        } else {
            return
        }
        this.seachPath = item.path;
        this.$router.push({ path: item.path });
      })
    },
  }
};
</script>
<style lang="scss">
.pwcon {
  .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  .el-input__icon {
    line-height: 30px;
  }
}
</style>
<style lang="scss" scoped>
.top-bar__logout{
  font-size: 14px
}
</style>

